<template>
  <div class="shop-cart-container">

    <!-- 购物车的列表 -->
    <div class="shop-cart-list">

      <!-- 项 -->
      <div class="mui-card" v-for="item in goodsList" :key="item.id">
        <div class="mui-card-content">
          <div class="mui-card-content-inner show-cart-item">
            <!-- 开关 -->
            <mt-switch v-model="switchObj[item.id]" @change="switchChange(item.id, switchObj[item.id])"></mt-switch>
            <!-- 图片 -->
            <img :src="item.thumb_path" alt="">
            <!-- 内容 -->
            <div class="info-container">
              <h3 class="title">{{ item.title }}</h3>
              <div class="info">
                <span class="danger">￥{{ item.sell_price }}</span>
                <!-- 购物车中的数字按钮 -->
                <cart-num-box :init-count="countObj[item.id]" :id="item.id"></cart-num-box>
                <a href="" @click.prevent="del(item.id)">删除</a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 信息 -->
      <div class="mui-card">
        <div class="mui-card-content">
          <div class="mui-card-content-inner show-cart-content">
            <div class="left">
              <p>总计（不含运费）</p>
              <p>
                已勾选商品 <span class="danger">{{ totalCount }}</span> 件，
                总价 <span class="danger">￥{{ totalPrice }}</span>
              </p>
            </div>
            <mt-button type="danger">去结算</mt-button>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
/** 引入购物车的数字按钮组件 **/
import CartNumBox from "../common/CartNumBox.vue";
/** 使用 vuex **/
import { mapGetters, mapMutations } from 'vuex';

/** 向外暴露一个 购物车 组件 **/
export default {
  data() {
    return {
      goodsList: [] // 商品列表
    }
  },
  created() {
    this.getGoodsList()
  },
  methods: {
    ...mapMutations(['updateSwitch', 'delGoodsById']),
    /** 获取购物车中商品的信息 **/
    async getGoodsList(){
      /* 判断此时idStr有没有数据, 没有就是没有商品 */
      if( this.idsStr.length <= 0 ) return;
      const { data } = await this.$http.get(
          "/api/goods/getshopcarlist/" + this.idsStr
      );
      if( data.status === 0 )
        this.goodsList = data.message;
    },
    /** 修改开关的状态 **/
    switchChange(id, change){
      /* 将状态同步修改到本地存储中 */
      this.updateSwitch({id: id, switch: change});
    },
    /** 根据id删除购物车中对应的商品 **/
    del(id){
      /* 安全判断, 让用户有犹豫的时间 */
      if( confirm("是否移除该商品? ") ){
        /* 将页面中的数据删除 */
        this.goodsList.some((item, i) => {
          if( item.id == id ){
            this.goodsList.splice(i, 1);
            return true;
          }
        });
        /* 同步本地数据 */
        this.delGoodsById(id);
      }
    }
  },
  components: {
    CartNumBox
  },
  computed: {
    ...mapGetters(
        ['idsStr', 'countObj', 'switchObj', 'totalCount', 'totalPrice']
    )
  }
}
</script>

<style lang="scss" scoped>
  .shop-cart-container{
    padding: 1px;
    background-color: #eee;
    .show-cart-item{
      display: flex;
      img{
        padding-left: 3px;
        width: 60px;
        height: 60px;
      }
      .info-container{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-left: 3px;
        .title{
          font-size: 13px;
        }
        .info{
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
    .show-cart-content{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left{
        p{
          font-size: 13px;
        }
      }
    }
  }

  .danger{
    font-size: 14px;
    color: red;
    font-weight: bold;
  }
</style>